<template>
    <div class="home">


        <div class="foot">
            <Tabar>
                <template v-slot:index>
                    <TabItem>
                        <van-icon name="apps-o" size="30px" />
                    </TabItem>
                </template>
                <template v-slot:list>
                    <TabItem>
                        <van-icon name="hot-o" size="30px" />
                    </TabItem>
                </template>
                <template v-slot:shopcar>
                    <TabItem>
                      <router-link to="shopcar">
                        <van-icon name="cart-o" size="30px" />
                      </router-link>
                    </TabItem>
                </template>
                <template v-slot:me>
                    <TabItem>
                        <van-icon name="smile-o" size="30px" />
                    </TabItem>
                </template>
            </Tabar>
        </div>
    </div>
</template>

<script>
import Tabar from "../components/tabar";
import TabItem from "../components/tab_item";

export default {
    components: {
        Tabar,
        TabItem,
    },
    data() {
        return {
            
        };
    },
};
</script>
<style lang="scss">
.foot {
    width: 100%;
    height: 10vh;
    position: absolute;
    left: 0;
    bottom: 0;
}
</style>
